<template>
    <div class="loginbox flex-center" ref="login">
        <div class="layoutL">
            <p>社区应急预防管理系统</p>
            <p>Community Emergency Prevent System</p>
        </div>
        <div class="layoutR flex-center">
            <div class="Box">
                <el-tabs type="border-card" class="formbox">
                    <el-tab-pane>
                        <template #label>
                            <span>登录</span>
                        </template>
                        <template #default>
                            <LoginView></LoginView>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane>
                        <template #label>
                            <span>注册</span>
                        </template>
                        <template #default>
                            <SignView></SignView>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

    </div>
</template>

<script setup lang='ts'>
import LoginView from './sub/login.vue'
import SignView from './sub/sign.vue'
import { ref, onMounted, onUnmounted } from "vue";

import * as THREE from "three";
import WAVES from "vanta/dist/vanta.birds.min";

const login = ref();
let vantaEffect: any = null; // 存储 Vanta 实例用于后续销毁
// 官方网址：Vanta.js - Animated 3D Backgrounds For Your Website (vantajs.com)
onMounted(() => {
    vantaEffect = WAVES({
        el: login.value,
        THREE: THREE,
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00,
        colorMode: "variance",
        separation: 40.00,
        alignment: 10.00,
        cohesion: 10.00
    });
});
onUnmounted(() => {
    if (vantaEffect) {
        vantaEffect.destroy(); // 销毁 Vanta 实例
    }
});
</script>

<style scoped lang="scss">
.loginbox {
    width: 100%;
    height: 100%;

    .layoutL {
        flex: 3;
        color: #EEE;
        font-size: 4rem;
    }

    .layoutR {
        flex: 2;

        .Box {
            width: 24rem;
            border-radius: 1rem;
            // background-color: rgba($color: #FFF, $alpha: 0.7);

            .formbox {
                border: 0;
                margin: 1rem auto;
                width: 21.875rem;
                height: 380px;
                background-color: rgba($color: #FFF, $alpha: 0.3);
                // key
                :deep(.el-form-item__label){
                    color:#fff !important;
                }
                // 背景
                :deep(.el-input__wrapper){
                    background-color: rgba($color: #FFF, $alpha: 0.3) !important;
                }
                // 图标
                :deep(.el-input__prefix){
                    color:#fff  !important;;
                }
                // Value
                :deep(.el-input__inner){
                    color:#fff  !important;
                    // 占位提示词
                    &::placeholder{
                        color:#fff !important;
                    }
                }
            }
        }
    }


}
</style>
